<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>广告列表</title>
    <%@ include file="inc/css.jsp" %>
</head>

<body>
<div id="posts" class="wrapper">

    <%@ include file="inc/nav.jsp" %>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">广告列表</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a href="javascript:void(0)" onclick="_bannerList.fn.addInfo()" class="btn btn-outline btn-primary btn-lg" role="button">新增广告</a>

                        <form class="navbar-form navbar-right" role="search">
                            <div class="form-group">
                                <select id="typeList" class="form-control" style="width: 150px;">
                                    <option value="1">草丛广告</option>
                                    <option value="2">其他广告</option>
                                </select>
                            </div>
                            <button type="button" id="c_search" class="btn btn-primary btn-sm">搜索</button>
                        </form>
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">

                        <div class="table-responsive">

                            <table class="table table-striped table-bordered table-hover" id="dataTables">
                                <colgroup>
                                    <col class="gradeA even"/>
                                    <col class="gradeA odd"/>
                                    <col class="gradeA even"/>
                                    <col class="gradeA odd"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>位置</th>
                                    <th>广告图片</th>
                                    <th>更新时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <!-- /.panel-body -->

                </div>
                <!-- /.panel -->
            </div>
        </div>

    </div>
    <!-- /#page-wrapper -->

    <!-- Modal -->
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="pwdModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">删除提示</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="bannerId"/>
                    确定删除该广告？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" onclick="_bannerList.fn.subDelInfo()" class="btn btn-primary">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- Modal end -->

    <!-- Modal -->
    <div class="modal fade" id="bannerInfoModal" tabindex="-1" role="dialog" aria-labelledby="pwdModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">广告信息</h4>
                </div>
                <div class="modal-body">
                    <form id="infoForm" method="post" action="backend/banner/save" class="form-horizontal" role="form" enctype="multipart/form-data">
                        <input type="hidden" id="hiddenBannerId" name="bannerId"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图片:</label>
                            <div class="col-sm-5">
                                <input type="file" name="url" id="mainImage" style="display:none;"/>
                                <a href="javascript:void(0);" onclick="_bannerList.fn.AddImg()">
                                    <img id="mainPicture" src="static/images/add.jpg" style="height: 200px; width: 200px; display: inline; margin-bottom: 5px;" border="1"/>
                                </a>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">位置：</label>
                            <div class="col-sm-5">
                                <select id="positionList" class="form-control" style="width: 150px;">
                                    <option value="1">一言</option>
                                    <option value="2">微音</option>
                                    <option value="3">谈心</option>
                                    <option value="4">兴趣圈</option>
                                    <option value="5">登录图片</option>
                                    <option value="6">信天涯</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="urlDiv">
                            <label class="col-sm-3 control-label">链接地址:</label>

                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="linkUrl" name="linkUrl" maxlength="100" placeholder="请输入链接地址"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" onclick="_bannerList.fn.subInfo()" class="btn btn-primary">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- Modal end -->

</div>
<!-- /#wrapper -->

<%@ include file="inc/footer.jsp" %>
</body>

<script type="text/javascript">
    var _bannerList = {
        v: {
            id: "_bannerList",
            list: [],
            dTable: null
        },
        fn: {
            init: function () {
                _bannerList.fn.dataTableInit();

                //套图主图预览
                $("#mainImage").uploadPreview({
                    Img: "mainPicture",
                    Width: 200,
                    Height: 170
                });

                // 查询
                $("#c_search").click(function () {
                    _bannerList.v.dTable.ajax.reload();
                });

                $('#positionList').change(function () {
                    if ($(this).val() == 4) {
                        $('#urlDiv').css('display', '');
                    } else {
                        $('#urlDiv').css('display', 'none');
                    }
                });
            },
            dataTableInit: function () {
                _bannerList.v.dTable = $leoman.dataTable($('#dataTables'), {
                    "processing": true,
                    "serverSide": true,
                    "searching": false,
                    "ordering": false,
                    "ajax": {
                        "url": "backend/banner/list",
                        "type": "POST"
                    },
                    "columns": [
                        {
                            "data": null,
                            render: function (data) {
                                if (data.type == 1) {
                                    return '草丛banner';
                                } else {
                                    var showName = "";
                                    switch (Number(data.position)) {
                                        case 1:
                                            showName = '一言';
                                            break;
                                        case 2:
                                            showName = '微音';
                                            break;
                                        case 3:
                                            showName = '谈心';
                                            break;
                                        case 4:
                                            showName = '兴趣圈';
                                            break;
                                        case 5:
                                            showName = '登录图片';
                                            break;
                                        case 6:
                                            showName = '信天涯';
                                            break;
                                    }
                                    return showName;
                                }
                            }
                        },
                        {"data": null},
                        {
                            "data": "updateTime",
                            render: function (data) {
                                if (null == data || data.length == 0) {
                                    return '';
                                } else {
                                    return formatJsonDateTime(data, 'yyyy-MM-dd hh:mm:ss');
                                }
                            }
                        },
                        {"data": ""}
                    ],
                    "columnDefs": [
                        {
                            "data": null,
                            "defaultContent": "<a type='button' title='编辑' class='btn btn-primary btn-circle edit'>" +
                            "<i class='fa fa-edit'></i>" +
                            "</a>" +
                            "&nbsp;&nbsp;" +
                            "<button type='button' title='删除' class='btn btn-danger btn-circle delete'>" +
                            "<i class='fa fa-trash'></i>" +
                            "</button>",
                            "targets": -1
                        }
                    ],
                    "createdRow": function (row, data, index) {
                        _bannerList.v.list.push(data);
                        if (null != data.url && data.url != '') {
                            $('td', row).eq(1).html("<img src='" + data.url + "' width='60px' height='60px' />");
                        } else {
                            $('td', row).eq(1).html("暂无");
                        }
                        $('td', row).eq(0).css('line-height', '65px');
                        $('td', row).eq(1).css('line-height', '65px');
                        $('td', row).eq(2).css('line-height', '65px');
                        $('td', row).eq(3).css('line-height', '65px');
                    },
                    rowCallback: function (row, data) {
                        $('td', row).last().find(".edit").click(function () {
                            _bannerList.fn.editInfo(data);
                        });

                        $('td', row).last().find(".delete").click(function () {
                            _bannerList.fn.delInfo(data.id);
                        });
                    },
                    "fnServerParams": function (aoData) {
                        aoData.typeId = $('#typeList option:selected').val();
                    },
                    "fnDrawCallback": function (row) {
                        $leoman.uiform();
                    }
                });
            },
            addInfo: function () {
                $('#mainPicture').prop('src', 'static/images/add.jpg');

                $leoman.clearForm($('#infoForm'));

                _bannerList.fn.changeDiv($('#typeList option:selected').val(), 1);

                $("#bannerInfoModal").modal("show");
            },
            changeDiv: function (typeId, flag) {
                if (typeId == 1) {
                    $('#positionList').parent().parent().css('display', 'none');
                    $('#urlDiv').css('display', 'none');
                } else {
                    $('#positionList').parent().parent().css('display', '');

                    if ($('#positionList option:selected').val() == 4) {
                        $('#urlDiv').css('display', '');
                    } else {
                        $('#urlDiv').css('display', 'none');
                    }
                }

                if (flag == 1) {
                    $('#positionList').prop('disabled', false);
                } else {
                    $('#positionList').prop('disabled', true);
                }
            },
            editInfo: function (data) {
                $('#hiddenBannerId').val(data.id);

                if (null == data.url || data.url == '') {
                    $('#mainPicture').prop('src', 'static/images/add.jpg');
                } else {
                    $('#mainPicture').prop('src', data.url);
                }

                $('#positionList').val(data.position);
                $('#linkUrl').val(data.linkUrl);

                _bannerList.fn.changeDiv(data.type, 2);

                $("#bannerInfoModal").modal("show");
            },
            AddImg: function () {
                // a标签绑定onclick事件
                $('#mainImage').click();
            },
            delInfo: function (id) {
                $('#bannerId').val(id);
                $("#delModal").modal("show");
            },
            subDelInfo: function () {
                var bannerId = $('#bannerId').val();

                $leoman.ajax("backend/banner/delete", {
                    "bannerId": bannerId
                }, function (result) {
                    if (result == 1) {
                        $leoman.notify("操作成功", "success");
                        $("#delModal").modal("hide");
                        _bannerList.v.dTable.ajax.reload(null, false);
                    } else {
                        $leoman.notify("操作失败", "error");
                    }
                });
            },
            subInfo: function () {
                var flag = true;
                var url = $('#mainPicture').prop('src');

                if (null == url || url == '' || url == _basePath + 'static/images/add.jpg' || url == 'static/images/add.jpg') {
                    $leoman.notify("图片不能为空", "error");
                    flag = false;
                    return;
                }

                // 所有的验证通过后，执行新增操作
                if (flag) {
                    $("#infoForm").ajaxSubmit({
                        url: _basePath + "backend/banner/save",
                        dataType: "json",
                        data: {
                            "typeId": $('#typeList option:selected').val(),
                            "position": $('#positionList option:selected').val()
                        },
                        success: function (result) {
                            if (result > 0) {
                                $leoman.notify("操作成功", "success");
                                $("#bannerInfoModal").modal("hide");
                                _bannerList.v.dTable.ajax.reload(null, false);
                            } else {
                                $leoman.notify("操作失败", "error");
                            }
                        }
                    });
                }
            }
        }
    }

    $(document).ready(function () {
        _bannerList.fn.init();
    });

</script>

</html>